<template>
    <h1>EL-开关组件</h1>
    <el-switch v-model="value1" />
    <el-switch
        v-model="value2"
        class="ml-2"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
    />
    <br>
    <el-switch v-model="isShow" />
    <hr>
    <img src="mn1.jpg" width="200px" v-if="isShow">
<!--  active-value设置开关打开的值 inactive-value设置开关关闭的值  -->
<!--  如果没有属性绑定，属性值默认就被看作一个普通的字符串  -->
    <el-switch v-model="numStr" active-value="1" inactive-value="0"/>
<!--  如果进行了属性绑定，“1”才可以被看做是字符串类型的1  -->
    <el-switch v-model="numStr" :active-value="'1'" :inactive-value="'0'"/>
<!--  当num是数字类型时，就需要属性绑定，否则1会被看做是字符串，无法生效  -->
    <el-switch v-model="num" :active-value="1" :inactive-value="0"/>
</template>

<script setup>
import { ref } from 'vue'

const value1 = ref(true)
const value2 = ref(true)
const isShow = ref(true)
const numStr = ref('1')
const num = ref(1)
</script>

<style scoped>

</style>